<template>
	<view class="i_container" :style="{height: height}">
		<view class="tabs">
			<custom-tabs :tabs="tabs" @change="changTab"></custom-tabs>
		</view>
		<view class="sz_list_box">
			<view v-if="activeIndex == 0">
				<view v-if="geList.length > 0">
					<view v-for="(ite, inde) in geList" :key="inde">
						<view class="sz_list_item" v-for="(item, index) in ite.studentCards" :key="index">
							<text class="txt_title">{{item.orgName}}</text>
							<view class="name_box">
								<view class="name_top">
									<view class="txt_txt"><text class="card_title">姓名：</text>{{item.empName}}</view>
									<view class="txt_txt"><text class="card_title">卡号：</text>{{item.cardNo}}</view>
								</view>
								<view class="name_bottom" :class="{disable_btn: item.cardState != 0}">
									<text v-if="item.cardState == 0" class="sz_btn_txt" @click="toQuery(item)">前往查询</text>
									<text v-else class="sz_btn_txt">{{item.cardStateDesc}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="less_txt" v-else>
					<text class="stu_item_txt">目前还没有记录!</text>
				</view>
			</view>
			<view v-if="activeIndex == 1">
				<view v-if="qingList.length > 0">
					<view v-for="(ite, inde) in qingList" :key="inde">
						<view class="sz_list_item" v-for="(item, index) in ite.studentCards" :key="index">
							<text class="txt_title">{{item.orgName}}</text>
							<view class="name_box">
								<view class="name_top">
									<view class="txt_txt"><text class="card_title">姓名：</text>{{item.empName}}</view>
									<view class="txt_txt"><text class="card_title">卡号：</text>{{item.cardNo}}</view>
								</view>
								<view class="name_bottom" :class="{disable_btn: item.cardState != 0}">
									<text v-if="item.cardState == 0" class="sz_btn_txt" @click="toQuery(item)">前往查询</text>
									<text v-else class="sz_btn_txt">{{item.cardStateDesc}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="less_txt" v-else>
					<text class="stu_item_txt">目前还没有记录!</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {queryStudentCardBalance, queryStudentCard} from '../../common/api/index.js';
	import {_showLoading} from '../../common/js/util.js'
	export default {
		data() {
			return {
				tabs:[{
					activeIndex: 0,
					title: '个人补助'
				},{
					activeIndex: 1,
					title: '亲友补助'
				}],
				activeIndex: 0,
				height: '600rpx',
				geList: [],
				qingList: [],
				stuList: []
			}
		},
		onShow:function(){
			let _that = this;
			uni.getSystemInfo({
				success: function (res) {
					_that.height = res.windowHeight + 'px';
				}
			})
			this._queryStudentCardBalance()
		},
		methods: {
			jumpToDetail(item) {
				uni.navigateTo({
					url: './subsidy?orgId=' + item.orgId + '&empId=' + item.empId
				})
			},
			_queryStudentCardBalance() {
				_showLoading('加载中,请稍后…')
				let s_userId = uni.getStorageSync('s_userId')
				queryStudentCard({
					userId: s_userId
				}).then(res => {
					if(res.code == 0) {
						this.stuList = res.data
						this.geList = res.data.filter(item => item.bindType == 0)
						this.qingList = res.data.filter(item => item.bindType == 1)
						uni.hideLoading()
					} else {
						this.geList = []
						this.qingList = []
						uni.hideLoading()
					}
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
				})
			},
			changTab(e){
				this.activeIndex = e.index;
			},
			toQuery(item) {
				uni.navigateTo({
					url: './subsidy?orgId=' + item.orgId + '&empId=' + item.empId
				})
			}
		}
	}
</script>

<style lang="scss">
	.i_container {
		background-color: rgb(243, 243, 243);
		.tabs{
			position: sticky;
			top: 0;
			z-index: 999;
		}
		.sz_list_box {
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			.sz_list_item {
				display: flex;
				flex-direction: column;
				padding: 32rpx;
				background: #FFFFFF;
				box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.05);
				border-radius: 8rpx;
				margin-bottom: 20rpx;
				.txt_title {
					font-size: 32rpx;
					font-family: "PingFangSC-Semibold, PingFang SC";
					font-weight: 660;
					padding-bottom: 32rpx;
					color: #3C424F;
					line-height: 44rpx;
					
				}
				.name_box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.name_top {
						display: flex;
						flex-direction: column;
						.txt_txt {
							font-size: 28rpx;
							font-family: "PingFangSC-Medium, PingFang SC";
							font-weight: 500;
							color: #3C424F;
							line-height: 50rpx;
							.card_title{
								display: inline-block;
								width: 132rpx;
								color: #6B707A;
							}
						}
					}
					.name_bottom {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 20rpx;
						background: #185AFF;
						border-radius: 8rpx;
						.sz_btn_txt {
							padding: 0 28rpx;
							line-height: 60rpx;
							font-size: 24rpx;
							font-family: "PingFang-SC-Medium, PingFang-SC";
							font-weight: 500;
							color: #FFFFFF;
						}
						&.disable_btn{
							background: #ccc;
							.sz_btn_txt{
								color: #666;
							}
						}
					}
				}
			}
			.less_txt {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0;
				.stu_item_txt {
					font-family: 'Arial Normal', 'Arial';
					font-weight: 400;
					font-size: 26rpx;
					color: #D9D9D9;
				}
			}
		}
	}
</style>